import './index.scss';
import loginBj from '../../assets/image/login-bj.jpg';
import { RequestGetPinPaiListApi, RequestLoginApi } from '../../api/login';
import { PinPaiListType } from '../../api/login/type';
import { Input, Select, message } from "antd";
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router';
import useLoginStore from '../../store/LoginStore/index';

function LoginPage() {
    let navigate = useNavigate(); // 路由
    let [useAccount, setUseAccount] = useState<string>(''); // 账号
    let [usePassword, setUsepassword] = useState<string>(''); // 密码
    let [pinpaiList, setPinpaiList] = useState<PinPaiListType[]>([]); // 品牌列表
    let [pinpai_id, setPinpai_id] = useState<string | number>(''); // 选择的品牌id
    let { setUserinfo, setToken } = useLoginStore();


    // 输入框的值 1账号 2密码
    const changeUseInput = (value: string, type: number) => {
        if (type == 1) {
            setUseAccount(value);
        } else if (type == 2) {
            setUsepassword(value);
        }
    }

    // 当账号输入框输入11位时，获取品牌列表
    useEffect(() => {
        if (useAccount.length == 11) {
            GetPinPaiList();
        }
    }, [useAccount]);

    // 选择品牌
    const changeSelectPinpai = (value: string) => {
        const pinpai = pinpaiList.find(x => x.name == value);
        console.log(pinpai);
        setPinpai_id(pinpai?.id || '');
    }

    // 确认登陆
    const changeLogin = async () => {
        if (!useAccount || useAccount.trim() == '') {
            return message.error('请输入账号');;
        }
        if (!usePassword || usePassword.trim() == '') {
            return message.error('请输入密码');;
        }
        console.log(useAccount, usePassword, pinpai_id);
        try {
            const res = await RequestLoginApi({
                account: useAccount,
                password: usePassword,
                pinpai_id: pinpai_id
            })
            if (res.code == 1) {
                setUserinfo(res.data?.userinfo);
                setToken(res.data?.userinfo.token);
                navigate('/workbench');
            } else {
                console.log(res.msg);
            }
        } catch (error) {
            console.log(error);
        }
    }


    // 获取品牌列表
    const GetPinPaiList = async () => {
        try {
            const res = await RequestGetPinPaiListApi({ mobile: useAccount });
            if (res.code == 1) {
                const newList = res.data ? res.data.map(x => {
                    return {
                        ...x,
                        value: x.name,
                        label: x.name
                    }
                }) : [];
                setPinpaiList(newList || []);
            } else {
                console.log(res.msg);
            }
        } catch (error) {
            console.log(error);
        }
    }

    return (
        <div className="login">
            <img className="login-img" src={loginBj} alt="" />
            {/* 登陆 */}
            <div className='login-box'>
                <div className='login-box-t'>
                    <span>欢迎 登录瑜伽馆平台</span>
                </div>
                <div className='login-box-c'>
                    <div className='login-box-list'>
                        <div className='login-box-list-item'>
                            <div className='login-box-list-item-l'>
                                <i className="iconfont icon-zhanghao"></i>
                            </div>
                            <Input size="large" placeholder="请输入账号" value={useAccount} onChange={(e) => changeUseInput(e.target.value, 1)} />
                        </div>
                        <div className='login-box-list-item'>
                            <div className='login-box-list-item-l'>
                                <i className="iconfont icon-mendianchaxun"></i>
                            </div>
                            <Select options={pinpaiList} allowClear placeholder="请选择品牌" onChange={(e) => changeSelectPinpai(e)} />
                        </div>
                        <div className='login-box-list-item'>
                            <div className='login-box-list-item-l'>
                                <i className="iconfont icon-mima"></i>
                            </div>
                            <Input.Password size="large" placeholder="请输入密码" value={usePassword} onChange={(e) => changeUseInput(e.target.value, 2)} />
                        </div>
                    </div>
                </div>
                <div className='login-box-b' onClick={() => changeLogin()}>
                    <span className='login-box-b-txt'>登录</span>
                </div>
            </div>
        </div>
    );
}

export default LoginPage;
